<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!doctype html>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>资金使用情况</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	
	<script type="text/javascript" src="<%=path%>/resources/script/jquery/jquery-1.11.3.js"></script>
	<link type="text/css" rel="stylesheet" href="<%=path%>/resources/script/jquery/easyui/themes/default/easyui.css" />
	<link type="text/css" rel="stylesheet" href="<%=path%>/resources/script/jquery/easyui/themes/icon.css" />
	<script type="text/javascript" src="<%=path%>/resources/script/jquery/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="<%=path%>/resources/script/jquery/easyui/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="<%=path%>/resources/script/jquery/easyui/jquery.easyui.patch.js"></script>
	<script type="text/javascript" src="<%=path%>/resources/script/util/easyui-util.js"></script>
	<script type="text/javascript" src="<%=path%>/resources/script/system/system-util.js"></script>
	<!-- 引入 ECharts 文件 -->
	<script src="<%=path %>/resources/script/echarts/echarts.js"></script>

  </head>
  
  <body class="easyui-layout">
  <div data-options="region:'center'" style="width:50%;">
  	<div>
  		<input type="hidden" id="fpid" />
  		<input type="hidden" id="tpid" />
    	<table>
   			<tr>
   				<td><input id="projects" name="projects" class="easyui-validatebox" style="width: 150px;" /></td>
   				<td><a id="btn_return" href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search">返回上一页</a></td>
   			</tr>
   		</table>
    </div>
    <!-- 为 ECharts 准备一个具备大小（宽高）的Dom -->
    <div id="task_progress" style="width: 550px;height:500px; margin: 0 auto;"></div>
  </div>
  <div data-options="region:'east'" style="width:50%;">
  	<table id="dg"></table>
  </div>
    <div id="win" class="easyui-window"
    	 data-options="modal:true,
    	 				closed:true,
    	 				maximizable:true,
    	 				minimizable:false,
    	 				collapsible:false,
    	 				iconCls:'icon-save',
    	 				draggable:true">
    	 <iframe id="contentFrame" src="" width=100% height=99% marginwidth=0 framespacing=0 marginheight=0 frameborder=no scrolling=no></iframe>
    </div>
    
<script type="text/javascript">
var contextPath = "<%=path%>";
var task_progress_myChart;

$(function(){
	$('#btn_return').hide();
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('task_progress'));
   	task_progress_myChart = myChart;
   	var _click_piId;		
	/*** 初始化项目库 */
	$('#projects').combobox({
        url:'projectIndex/projectIndexs.shtml',
        method:'get',
        valueField:'id',
        textField:'name',
        editable : false,
        panelHeight:'auto',
        onSelect : function (record) {
        	var _projectIndexId = record.id;
        	$('#fpid').val(_projectIndexId);
        	/*** 初始化报表 */
        	myChart.showLoading();
        	$.post('bireport/taskProgressData.shtml', {projectIndexId : _projectIndexId}, function(data){
        		myChart.hideLoading();
        		initCharts(myChart, data);
        	});
        },
        onLoadSuccess : function () {
        	var data = $('#projects').combobox('getData');
        	if (data.length > 0) {
				$('#projects').combobox('select', data[0].id);
			}
        }
     });
     
     $('#btn_return').click(function(){
     		var r_pid = $('#tpid').val();
     		if (null != r_pid && '' != r_pid) {
     			task_progress_myChart.showLoading();
		    	$.post('bireport/taskProgressData.shtml', {projectIndexId : r_pid}, function(data){
		       		task_progress_myChart.hideLoading();
		       		initCharts(task_progress_myChart, data);
		       	});	
     		}
       });
});

function initCharts(myChart, data) {
	var _title = data.data.name + '任务进度';
	var dataObj = data.data.data;
	var _xAxis_data = new Array();
	var _level1_data = new Array();
	var _level2_data = new Array();
	var _level3_data = new Array();
	var _level4_data = new Array();
	var _level5_data = new Array();
	var _leaf = data.data.leaf;
	var _parent_piId = data.data.ppiId;
	$('#tpid').val(_parent_piId);
	initDataList(data.data.piId, data.data.name);
	if (null == _parent_piId || '' == _parent_piId) {
		$('#btn_return').hide();
	}
	for (var i=0; i<dataObj.length; i++) {
		_xAxis_data.push(dataObj[i].name);
		var level1_obj = {};
		level1_obj['name'] = dataObj[i].name;
		level1_obj['value'] = dataObj[i].level1;
		level1_obj['piId'] = dataObj[i].piId;
		level1_obj['leaf'] = dataObj[i].leaf;
		level1_obj['ppiId'] = dataObj[i].ppiId;
		_level1_data.push(level1_obj);
		var level2_obj = {};
		level2_obj['name'] = dataObj[i].name;
		level2_obj['value'] = dataObj[i].level2;
		level2_obj['piId'] = dataObj[i].piId;
		level2_obj['leaf'] = dataObj[i].leaf;
		level2_obj['ppiId'] = dataObj[i].ppiId;
		_level2_data.push(level2_obj);
		var level3_obj = {};
		level3_obj['name'] = dataObj[i].name;
		level3_obj['value'] = dataObj[i].level3;
		level3_obj['piId'] = dataObj[i].piId;
		level3_obj['leaf'] = dataObj[i].leaf;
		level3_obj['ppiId'] = dataObj[i].ppiId;
		_level3_data.push(level3_obj);
		var level4_obj = {};
		level4_obj['name'] = dataObj[i].name;
		level4_obj['value'] = dataObj[i].level4;
		level4_obj['piId'] = dataObj[i].piId;
		level4_obj['leaf'] = dataObj[i].leaf;
		level4_obj['ppiId'] = dataObj[i].ppiId;
		_level4_data.push(level4_obj);
		var level5_obj = {};
		level5_obj['name'] = dataObj[i].name;
		level5_obj['value'] = dataObj[i].level5;
		level5_obj['piId'] = dataObj[i].piId;
		level5_obj['leaf'] = dataObj[i].leaf;
		level5_obj['ppiId'] = dataObj[i].ppiId;
		_level5_data.push(level5_obj);
	}
    // 指定图表的配置项和数据
    var option = {
    	title : {
	        text: _title,
	        x:'center'
	    },
	    tooltip : {
	        trigger: 'axis',
	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	        }
	    },
	    legend: {
	    	orient: 'horizontal',
		    top : 30,
	        left: 'center',
		    data:['0%-25%','25%-50%','50%-75%','75%-99.99%', '已完成']
	    },
	    grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '20%',
	        containLabel: true
	    },
	    xAxis : [
	        {
	            type : 'category',
	            axisLabel : {
	            	interval : 0,
	            	rotate : -90
	            },
	            data : _xAxis_data
	           /*  data:['1.办学理念','2.学校治理','3.办学机制',
		        '4.专业建设','5.教学改革','6.师资队伍',
		        '7.实训条件','8.信息化建设','9.服务能力'] */
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value'
	        }
	    ],
	    series : [
	        {
	            name:'0%-25%',
	            type:'bar',
	            data : _level1_data
	            /* data:[1000, 1300, 0, 500, 1000, 666,
	            3355, 2233, 897] */
	        },
	        {
	            name:'25%-50%',
	            type:'bar',
	            data : _level2_data
	            /* data:[511, 365, 555, 1240, 333, 666,
	            1212, 453, 3254] */
	        },
	        {
	            name:'50%-75%',
	            type:'bar',
	            data : _level3_data
	            /* data:[1000, 1300, 0, 500, 1000, 666,
	            3355, 2233, 897] */
	        },
	        {
	            name:'75%-100%',
	            type:'bar',
	            data : _level4_data
	            /* data:[511, 365, 555, 1240, 333, 666,
	            1212, 453, 3254] */
	        },
	        {
	        	name : '已完成',
	        	type : 'bar',
	        	data : _level5_data
	        }
	    ]
	};


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    
    myChart.on('click', function (params) {
    	var _leaf = params.data.leaf;
    	if (!_leaf) {
    		//var _myChart = echarts.init(document.getElementById('task_progress'));
        	//_myChart.showLoading();
        	myChart.clear();
        	myChart.showLoading();
        	$.post('bireport/taskProgressData.shtml', {projectIndexId : params.data.piId}, function(data){
        		myChart.hideLoading();
        		initCharts(myChart, data);
        		$('#btn_return').show();
        	});	
    	} else {
    		//$.messager.alert('warning', '不可以！', 'warning');
    	}
    });
}
function initDataList(projectIndexId, title) {
	if (null == projectIndexId || '' == projectIndexId) {
		return false;
	}
	var width = $(window).width();
	var east_width_str = $('body').layout('panel','east').panel("options").width;
	var w = Number(east_width_str.substring(0, east_width_str.length-1))/100*width;
	$('#dg').datagrid({    
	    title: title + "任务统计表",
		border:0,
		nowrap:true,
		striped:true,
		fit: true,//自动大小
		url:'bireport/taskCountList.shtml',
		queryParams : {projectIndexId : projectIndexId, type : '1'},
		frozenColumns : [[
			{field : 'project_index_id', title : 'project_index_id', hidden:true},    
	        {field : 'project_index_name', title : '指标名称', width:0.3*w}
		]],
	    columns:[[    
	        {field : 'level1', title : '[0%-25%]', width:0.13*w, align : 'center',
	        	formatter : function (value, row, index) {
	        		return '<a href="javascript:void(0);" onclick="showDetail(\'' + row.project_index_id + '\');">' + value + '</a>';
	        	}
	        },
	        {field : 'level2', title : '[25%-50%]', width:0.13*w, align : 'center',
	        	formatter : function (value, row, index) {
	        		return '<a href="javascript:void(0);" onclick="showDetail(\'' + row.project_index_id + '\');">' + value + '</a>';
	        	}
	        },
	        {field : 'level3', title : '[50%-75%]', width:0.13*w, align : 'center',
	        	formatter : function (value, row, index) {
	        		return '<a href="javascript:void(0);" onclick="showDetail(\'' + row.project_index_id + '\');">' + value + '</a>';
	        	}
	        },
	        {field : 'level4', title : '[70%-99.99%]', width:0.13*w, align : 'center',
	        	formatter : function (value, row, index) {
	        		return '<a href="javascript:void(0);" onclick="showDetail(\'' + row.project_index_id + '\');">' + value + '</a>';
	        	}
	        },
	        {field : 'level5', title : '[100%]', width:0.13*w, align : 'center',
	        	formatter : function (value, row, index) {
	        		return '<a href="javascript:void(0);" onclick="showDetail(\'' + row.project_index_id + '\');">' + value + '</a>';
	        	}
	        },
	        {field : 'pi_plan_amount_', title : '预算金额', width:0.15*w, align : 'center',
	        	formatter : function (value, row, index) {
	        		return formateAmount(value, row);
	        	}
	        },
	        {field : 'plan_amount_', title : '已申请资金', width:0.15*w, align : 'center',
	        	formatter : function (value, row, index) {
	        		return formateAmount(value, row);
	        	}
	        },
	        {field : 'fact_amount_', title : '已使用资金', width:0.15*w, align : 'center',
	        	formatter : function (value, row, index) {
	        		return formateAmount(value, row);
	        	}
	        },
	        {field : 'unuser_pi_plan_amount_', title : '剩余预算', width:0.15*w, align : 'center',
		        	formatter : function (value, row, index) {
		        		return formateAmount(value, row);
		        	}
		        },
	        {field : 'unuser_amount_', title : '待使用资金', width:0.15*w, align : 'center',
	        	formatter : function (value, row, index) {
	        		return formateAmount(value, row);
	        	}
	        }
	    ]],
		singleSelect:true,
		rownumbers:true,
		toolbar:'#tb',
		pagination:false,
		//pageSize:50,
		onClickRow:function(rowIndex, rowData){}
	});
	/* $('#dg').datagrid({    
	    title: title + "任务列表",
		border:0,
		nowrap:true,
		striped:true,
		fit: true,//自动大小
		url:'task/queryList.shtml',
		queryParams : {projectIndexId : projectIndexId},
	    frozenColumns : [[
			{field : 'id', title : 'id', hidden:true},    
	        {field : 'remark', title : '任务内容', width:0.4*w}
		]],
	    columns:[[    
	        {field : 'startTime', title : '任务计划时间段', width:0.25*w, align : 'center',
	        	formatter : function (value, row, index) {
	        		return formatTaskTimeAdv(value, row);
	        	}
	        },
	        {field : 'planAmount', title : '预算金额', width:0.15*w, align : 'center',
	        	formatter : function (value, row, index) {
	        		return formateAmount(value, row);
	        	}
	        },
	        {field : 'status', title : '审批状态', width:0.2*w, align : 'center',
	        	formatter : function (value, row, index) {
	        		return formateTaskStatusAdv(value, row);
	        	}
	        },
	        {field : 'createUserName', title : '创建人', width:0.15*w, align : 'center'},
	        {field : 'createTime', title : '创建时间', width:0.25*w, align : 'center'},
	        {field : 'factAmount', title : '实际使用资金', width:0.15*w, align : 'center',
	        	formatter : function (value, row, index) {
	        		return formateAmount(value, row);
	        	}
	        },
	        {field : 'progress', title : '总体进度', width:0.15*w, align : 'center',
	        	formatter : function (value, row, index) {
	        		return formateProgress(value, row);
	        	}
	        },
	        {field : 'taskActorNames', title : '相关参与人', width:0.3*w, align : 'center',
	        	formatter : function (value, row, index) {
	        		return displayTaskActor(value);
	        	}
	        }
	    ]],
		singleSelect:true,
		rownumbers:true,
		toolbar:'#tb',
		pagination:true,
		pageSize:50,
		onClickRow:function(rowIndex, rowData){}
	}).datagrid('getPager').pagination({  
        pageSize: 50,//每页显示的记录条数，默认为10  
        pageList: [50, 100, 200, 500],//可以设置每页记录条数的列表  
        beforePageText: '第',//页数文本框前显示的汉字  
        afterPageText: '页    共 {pages} 页',  
        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
    }); */
}
function showDetail(projectIndexId) {
	var url = 'bireport/tasks.shtml?projectIndexId=' + projectIndexId;
	showEasyUiWindow('contentFrame', url, 'win', '查看任务详情', 960, 450);
} 	
</script>
  </body>
</html>
